<template>
  <div class="topbianjiservice">
    <div class="titleservicebianxie">
      <div class="diyiservicebianxie"></div>
      <font>编辑服务信息</font>
    </div>
    <div class="dierservicebianxie">
      <hr color="#F7FAFD" />
    </div>
    <div class="juminbianxie">
      <font>居民信息</font>
    </div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-input v-model="list8.user_id" v-if="false" placeholder="请输入内容"></el-input>
      <div class="disan1bianxie">
        <table border="0" height="300px" width="100%">
          <tr>
            <td width="60px" align="right"><font>姓名*</font></td>
            <td width="200px">
              <el-input
                v-model="list8.user_name"
                width="200px"
                placeholder="请输入内容"
                 :disabled="true"
              ></el-input>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font>身份证号*</font></td>
            <td width="200px">
              <el-input v-model="list8.user_cardId" placeholder="请输入内容"></el-input>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font>性别*</font></td>
            <td width="200px">
              <el-select v-model="list8.user_sex" placeholder="请选择">
                <el-option
                  v-for="item in list"
                  :label="item.label"
                  :key="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
          </tr>

          <tr>
            <td width="60px" align="right"><font>出生年月*</font></td>
            <td width="200px">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                v-model="list8.user_bir"
              ></el-date-picker>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font>联系电话*</font></td>
            <td width="200px">
              <el-input v-model="list8.user_phone" placeholder="请输入内容"></el-input>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font>现居地*</font></td>
            <td width="200px">
              <el-input width="200px" v-model="list8.user_area" placeholder="请输入内容"></el-input>
            </td>
          </tr>

          <tr>
            <td width="60px" align="right"><font>居民标签</font></td>
            <td width="200px">
              <el-select v-model="list8.lable_id" placeholder="请选择">
                <el-option
                  v-for="item in list1"
                  :label="item.label"
                  :key="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"></td>
            <td width="200px"></td>
            <td width="150px"></td>
            <td width="60px" align="right"></td>
            <td width="200px"></td>
          </tr>

          <tr>
            <td width="60px" align="right"><font>家庭成员</font></td>
            <td width="200px" colspan="7">
              <div id="jia">
                <div id="jia1-1">
                  <img class="bianxieimg"
                    width="50px"
                    height="50px"
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gpbctv.com%2Fuploads%2F20210424%2Fzip_1619246266UkP6CL.jpg&refer=http%3A%2F%2Fwww.gpbctv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668159694&t=df771f88b08225d45c9f63c773529041"
                    alt=""
                  />
                </div>
                <div id="jia1-2">
                  <table id="table1bianxie">
                    <tr>
                      <td><font id="xingming">李青</font></td>
                      <td><font class="font1">58sui</font></td>
                    </tr>
                    <tr>
                      <td><font class="font1">关系:</font></td>
                      <td><font class="font1">父母</font></td>
                    </tr>
                  </table>
                </div>
              </div>
              <div id="jia1">
                <div id="jia1-1">
                  <img
                  class="bianxieimg"
                    width="50px"
                    height="50px"
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gpbctv.com%2Fuploads%2F20210424%2Fzip_1619246266UkP6CL.jpg&refer=http%3A%2F%2Fwww.gpbctv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668159694&t=df771f88b08225d45c9f63c773529041"
                    alt=""
                  />
                </div>
                <div id="jia1-2">
                  <table id="table1bianxie">
                    <tr>
                      <td><font id="xingming">王林</font></td>
                      <td><font class="font1">28sui</font></td>
                    </tr>
                    <tr>
                      <td><font class="font1">关系:</font></td>
                      <td><font class="font1">夫妻</font></td>
                    </tr>
                  </table>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="didsibianxie">
        <hr color="#F7FAFD" />
      </div>
      <div class="diwubianxie">
        <font>服务信息</font>
      </div>
      <div class="diliubianxie">
        <table border="0" height="300px" width="100%">
          <tr>
            <td width="60px" align="right"><font>服务编号</font></td>
            <td width="200px"><font class="diliubianxiefont">5415415</font></td>
            <td width="150px"></td>
            <td width="60px" align="right"><font>服务机构*</font></td>
            <td width="200px">
              <el-select v-model="list8.sign_organization" placeholder="请选择">
                <el-option
                  v-for="item in list2"
                  :label="item.organization_name"
                  :key="item.organization_id"
                  :value="item.organization_id"
                >
                </el-option>
              </el-select>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font>服务团队*</font></td>
            <td width="200px">
              <el-select v-model="list8.sign_team" placeholder="请选择">
                <el-option
                  v-for="item in list3"
                  :label="item.label"
                  :key="item.value3"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
          </tr>

          <tr>
            <td width="60px" align="right"><font>服务医生*</font></td>
            <td width="200px">
              <el-select v-model="list8.sign_doctor" placeholder="请选择">
                <el-option
                  v-for="item in list4"
                  :label="item.doctor_name"
                  :key="item.doctor_id"
                  :value="item.doctor_id"
                >
                </el-option>
              </el-select>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font>服务包*</font></td>
            <td width="200px">
             <el-select v-model="list8.serve_page" placeholder="请选择">
                <el-option
                  v-for="item in list5"
                  :label="item.serve_name"
                  :key="item.serve_id"
                  :value="item.serve_id"
                >
                </el-option>
              </el-select>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font>服务项目*</font></td>
            <td width="200px">
              <el-select v-model="list8.projects_id" placeholder="请选择">
                <el-option
                  v-for="item in list6"
                  :label="item.label"
                  :key="item.value6"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
          </tr>

          <tr>
            <td width="60px" align="right"><font>服务地点*</font></td>
            <td width="200px">
              <el-select v-model="value7" placeholder="请选择">
                <el-option
                  v-for="item in list7"
                  :label="item.label"
                  :key="item.value7"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font>服务时间*</font></td>
            <td width="200px">
              <el-date-picker
                type="date"
                v-model="list8.end_time"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font></font></td>
            <td width="200px"></td>
          </tr>

          <tr>
            <td width="60px" align="right"><font>服务备注*</font></td>
            <td width="200px" colspan="4">
              <el-input type="textarea"></el-input>
            </td>
            <td width="150px"></td>
            <td width="60px" align="right"><font></font></td>
            <td width="200px"></td>
          </tr>
        </table>
      </div>
      <div class="didsibianxie">
        <hr color="#F7FAFD" />
      </div>
      <div class="diqibianxie">
        <router-link to="/serve01">
        <el-button type="primary" @click="bth()">提交审核</el-button>
        </router-link>
        <router-link to="/serve01">&nbsp;&nbsp;&nbsp;
        <el-button plain>返回</el-button>
        </router-link>
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL="http://localhost:8080"
export default {
  data() {
    return {
      list: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
      value: "", //性别

      list1: [
        {
          value: 1,
          label: "慢病护理",
        },
        {
          value: 2,
          label: "高血压",
        },
        {
          value: 3,
          label: "高血糖",
        },
        
      ],
      value1: "", //标签

      list2:"",//服务机构
      value2: "",

      list3: [
        {
          value: 1,
          label: "A团队",
        },
        {
          value: 2,
          label: "B团队",
        },
        {
          value: 3,
          label: "C团队",
        },
        
      ],
      value3: "", //服务团队

      list4:"",
      value4: "",//医生

      list5: "",
      value5: "",//包

      list6: [
        {
          value: 1,
          label: "高血压随访服务",
        },
        {
          value: 2,
          label: "高血脂随访服务",
        },
        {
          value: 3,
          label: "低血糖随访服务",
        },
      ],
      value6: "", //服务项目

      list7: [
        {
          value: 1,
          label: "上门服务",
        },
        {
          value: 2,
          label: "机构门诊",
        }
      ],
      value7: "", //服务地点

      list8:[],

      name: "",
      shenfen: "",
      aaaa: "",
    };
  },
  created () {
    this.query1(),
    this.query2(),
    this.query3(),
    this.quertList(),
    document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
  },
  methods: {
    bth(){
      axios({
        url: "serve/updateServe",
        method: "POST",
        params:{
          serveList:this.list8
        }
      }).then((res) => {
        this.$notify({
          title: '成功',
          message: '提交审核成功',
          type: 'success'
        });
      });

    },
    quertList(){
      axios({
        url: "serve/getServeById",
        method: "GET",
        params:{
          id:this.$route.query.id
        }
      }).then((res) => {
        this.list8 = res.data; //把值传到list里面
        console.log(res.data);
      });
    },
    query3(){
      axios({
            url:'/sign/getServePageList',
            method:'GET',
        }).then((res) => {
            this.list5=res.data      //把值传到list里面
        })
    },
    query2(){
      axios({
            url:'/doctor/getDoctorList',
            method:'GET',
        }).then((res) => {
            this.list4=res.data      //把值传到list里面
        })
    },
    query1(){
      axios({
            url:'/sign/getOrganizationList',
            method:'GET',
        }).then((res) => {
            this.list2=res.data      //把值传到list里面
        })
    },
  },
  
};
</script>

<style>
.bianxieimg{
  border-radius: 50px;
}
#table1bianxie{
  float: left;
  margin-top: -65px;
  margin-left: 110px;
  width: 80px;
}
.diqibianxie {
  float: left;
  width: 96%;
  height: 70px;
  margin-left: 2%;
  margin-top: -4.5%;
  /* background-color: red; */
}
.diliubianxie .diliubianxiefont {
  font-size: 13px;
  color: #000;
}
.diliubianxie font {
  font-size: 13px;
  color: #c0c4cc;
}
.diliubianxie {
  float: left;
  width: 96%;
  /* height: 100px; */
  margin-left: 2%;
  margin-top: -3%;
  /* background-color: red; */
}
.didsibianxie {
  float: left;
  width: 96%;
  height: 100px;
  margin-left: 2%;
  margin-top: 1%;
}
.diwubianxie {
  float: left;
  width: 96%;
  /* height: 100px; */
  margin-left: 2%;
  margin-top: -5%;
  /* background-color: red; */
  font-size: 16px;
}
#jia1-2 {
  float: left;
  width: 100px;
  height: 84px;
  /* background-color: #2984f8; */
}
#jia1-1 {
  float: left;
  width: 100px;
  height: 84px;
  line-height: 120px;
  text-align: center;
  /* background-color: #2984f8; */
}
#jia1 {
  margin-left: 2%;
  float: left;
  width: 200px;
  height: 84px;
  border: 1px solid rgb(223, 217, 217);
  border-radius: 5px;
  /* background-color: brown;    */
}
#jia:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#jia1:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#jia {
  float: left;
  width: 200px;
  height: 84px;
  border-radius: 5px;

  border: 1px solid rgb(223, 217, 217);
  /* background-color: brown;    */
}
.disan1bianxie {
  width: 96%;
  /* height: 100px; */
  float: left;
  /* background-color: red; */
  margin-left: 2%;
  margin-top: 1%;
  font-size: 13px;
  color: #999999;
}
.juminbianxie {
  float: left;
  width: 98%;
  height: 20px;
  margin-left: 2%;
  font-size: 16px;
  margin-top: 2%;
}
.dierservicebianxie {
  float: left;
  height: 10px;
  width: 96%;
  margin-left: 2%;
  /* margin-top: 6%; */
  /* background-color: blue; */
}
.diyiservicebianxie {
  width: 6px;
  height: 20px;
  background-color: #2984f8;
  border-radius: 5px;
  margin-left: 2%;
  display: inline-block;
  margin-right: 10px;
}
.titleservicebianxie {
  width: 100%;
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  /* background: rgb(255, 214, 214); */
}
.topbianjiservice {
  width: 1150px;
  height: 930px;
  background: white;
  margin: 20px auto;
}
</style>